<template>
  <div class="backgroundWhite height100">
    <navs title="课程详情" fixed></navs>
    <img
      class="bgimg pt40"
      v-default-img
      :src="$oss + detail.course_cover"
      alt=""
    />
    <div class="backgroundWhite positionRe main ts p16">
      <div class="colorGrey ft32 fb">{{ detail.course_name }}</div>
      <div class="u-f u-f-ac mt16">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-wode1"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28"
          >主讲专家：{{ detail.expert_name }}</label
        >
      </div>
      <div class="u-f u-f-ac mt16 mb28">
        <svg class="icon ft32 colordb" aria-hidden="true">
          <use xlink:href="#icon-time"></use>
        </svg>
        <div class="litter-line ml4"></div>
        <label class="color99 ml8 flex1 ft28 ellipsis-1"
          >对象:{{ detail.courseObj }}- -{{ detail.course_time }}课时</label
        >
      </div>
      <van-divider />
      <div class="mt28 mb16 pb40">
        <div class="ft32 fb u-f u-f-ac">
          <div class="line mr8"></div>
          <label class="colorGrey">课程简介</label>
        </div>
        <div class="positionRe">
          <svg
            class="icon positionAb ft28"
            aria-hidden="true"
            style="top: -0.106rem; right: 0.333rem"
          >
            <use xlink:href="#icon-icon"></use>
          </svg>
          <div class="content ft28 color525 mt28">
            {{ detail.course_intro }}
          </div>
        </div>
      </div>
    </div>
    <div class="p20 bottom_fixed">
      <van-button
        round
        block
        color="#2D65AC"
        @click="$toPage(`/courseOrder/${detail.id}`)"
      >
        立即点单
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount, ref } from 'vue'
import { useRoute } from 'vue-router'
import { courseObjList } from '@/utils/model/index.js'

let isSuccess = ref(false) //报名是否成功
const route = useRoute()
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
let detail = ref({})
onBeforeMount(async () => {
  let res = await _this.$api.course.getCourseInfo(route.params.id)
  detail.value = res.data
  detail.value.courseObj = detail.value.course_object
    .map((obj) => courseObjList[obj])
    .join('、')
})
</script>

<style scoped lang="scss">
.main {
  margin-top: -0.666667rem;
  border-radius: 0.426667rem 0.426667rem 0px 0px;
}
.litter-line {
  height: 0.266667rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.content {
  padding: 0.266667rem 0.6rem;
  background: #f9fbfe;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.bottom_fixed {
  @include bottom_fixed;
}
</style>
